<template>
  <UView name="设备型号">
    <UViewSearch v-model="searchModel">
      <URow col="search">
        <UTreeSelect field="typeId" label="设备类型" :allowClear="true"
               url="/iot/deviceType/tree" labelField="name" valueField="id"/>
        <UInput field="model" label="设备型号" />
        <UFuncBtn func="query" url="/iot/deviceModel/view">搜索</UFuncBtn>
        <UFuncBtn func="reset">重置</UFuncBtn>
        <UFuncBtn func="add" url="/iot/deviceModel/add" v-auth="'iot:deviceModel:add'">新增</UFuncBtn>
      </URow>
    </UViewSearch>
    <UViewModal title="设备型号管理" :span="[7, 14]" v-model="editModel" :rules="rules">
      <template #default="{model}">
        <UTreeSelect field="typeId" label="设备类型"
             url="/iot/deviceType/tree" labelField="name" valueField="id"/>
        <UInput field="model" label="设备型号" />
        <UInput field="remark" label="型号说明" />
      </template>
      <template #footer>
        <UFuncBtn func="cancel">取消</UFuncBtn>
        <UFuncBtn func="submit" url="/iot/deviceModel/saveOrUpdate">提交</UFuncBtn>
        <UFuncBtn func="reset">重置</UFuncBtn>
      </template>
    </UViewModal>
    <UViewTable :columns="columns">
      <template #action="{record}">
        <UFuncTag func="edit" :data="record" url="/iot/deviceModel/edit" v-auth="'iot:deviceModel:edit'">修改</UFuncTag>
        <UFuncTag func="del" :data="record" url="/iot/deviceModel/del" v-auth="'iot:deviceModel:del'">删除</UFuncTag>
      </template>
    </UViewTable>
  </UView>
</template>
<!-- 设备型号功能 -->
<script>
import {ref, reactive} from "vue";
export default {
  name: "DeviceModel",
  setup() {
    let columns = ref([
          {field: "typeId", title: "设备类型", url: '/iot/deviceType/tree'
            , labelField: "name", valueField: "id"},
          {field: "model", title: "型号"},
          {field: "remark", title: "型号说明"},
          {field: 'action', title: '操作', type: 'action'},
      ]);

    let rules = reactive({
      model: {required: true, message: '设备型号必填'},
      typeId: {required: true, message: '设备类型必填'},
    })

    let editModel = ref({});
    let searchModel = ref({});
    return {columns, rules, editModel, searchModel}
  },
}
</script>
<style scoped> </style>